<!--
 * @Author: albert shyttsyj@126.com
 * @Date: 2024-01-06 17:34:04
 * @LastEditors: albert shyttsyj@126.com
 * @LastEditTime: 2024-06-04 23:44:10
 * @FilePath: /sales-assistant-admin/src/views/index/components/overview.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-card class="home__card-item">
    <div slot="header" class="home__card-title clearfix">
      <h3>业务概览（销售）</h3>
      <!-- <ul class="home__card-menu">
        <li>昨日</li>
        <li>今日</li>
        <li>本周</li>
        <li>本月</li>
      </ul> -->
      <el-date-picker
      class="home__card-menu"
        v-model="createTime"
        type="datetimerange"
        size="mini"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00','23:59:59']"
        align="right">
      </el-date-picker>
    </div>
    <ul class="home__overview"   v-loading="loading">
      <li
        v-for="(item, index) in list"
        :key="index"
        class="home__overview__item">
        <div class="home__overview__left">
          <div
            :style="{ width: `${60 - index * 6}%` }"
            class="home__overview__inner"
            @click="jumpTargetPage(item)">
                <icon :name="item.icon" />
              &nbsp; {{ item.typeText }}
          </div>
        </div>
        <div class="home__overview__right">
          <h4>{{ item.dataText }}</h4>
          <div>
            {{ item.dataValue }}
          </div>
        </div>
      </li>
    </ul>
  </el-card>
</template>

<script>
import { businessReportSale } from '@/api/report/report'

export default {
  name: 'Overview',
  components: {},
  data() {
    return {
      loading: false,
      list: [{},{},{},{},{},{}],
      createTime: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '昨日',
            onClick(picker) {
              const end = new Date(new Date().setHours(0,0,0,0))
              const start = new Date(new Date().setHours(0,0,0,0))
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '今日',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0,0,0,0))
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0,0,0,0))
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0,0,0,0))
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0,0,0,0))
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  watch: {
    createTime() {
      console.log(this.createTime)
      this.getList()
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      // 处理查询参数
      var queryParams = {
        createTime: this.createTime
      }
      console.log(queryParams)
      businessReportSale(queryParams).then((response) => {
        this.list = response.data.list
        this.loading = false
      })
    },
    jumpTargetPage(item) {
      if (item.componentName) {
        this.$router.push({
          name: item.componentName
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home__overview {
  padding: 20px !important;
  &__item {
    display: flex;
    margin-bottom: 8px;
  }
  &__left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 100%;
    color: #fff;
    text-align: center;
    background-color: #3456dd;
    border-radius: 4px;
  }
  &__icon {
    width: 20px;
    height: 20px;
  }
  &__right {
    align-items: center;
    & > h4 {
      margin: 0 0 6px;
      color: #999;
    }
  }
}
</style>
